<template>
  <div>
    <div>
      <label for="">用户名 <input type="text" v-model="shu" /> </label>
      <label for="">密码 <input type="text"  /> </label><br />
      <button @click="ck('login')">登录</button>
    </div>
    <div v-if="shu=='黄'">
      <!-- 声明式的导航  -->
      <!-- router-link跳转链接 -->
      <!--  -->
      <!-- <router-link :to="{name:'home'}">home</router-link>
      <br>
      <router-link to="/about">about</router-link>
      <hr> -->
      <!--  编程式的导航  -->
      <span @click="ck('home')">home</span><br />
      <span @click="ck('about')">about</span>

      <hr />
      <button @click="fore(1)">前</button>
      <button @click="fore(-1)">后</button>
      <!-- router-view是router-link跳转链接里所要展示的内容 -->
      <router-view></router-view>
    </div>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      shu: "",
      shu2: "",
    };
  },
  created() {},
  computed: {},
  methods: {
    fore(e) {
      this.$router.go(e);
    },
    ck(e) {
      if(this.shu==1){
        localStorage.setItem('data', 1) 
        this.$router.push({ name: e, params: { id: 2 } });
      }else{
        alert('账户密码错误')
      }
      let userId = 111;
      // query传参在头部有显示，但是params不会
      // this.$router.push(`/${e}`)
      // this.$router.push({name:e, query: {id:1}})
      // this.$router.push({path:`/${e}`, query: {id:1}})
      // this.$router.push({path:`/${e}`, params: {id:1}})
  
      // this.$router.push({ path:`/${e}/${userId}`})
      this.shu = this.$route.query.id;
      this.shu2 = this.$route.params.id;
      // 第二 replace(没有历史记录)
      // this.$router.replace({ path:`/${e}/${userId}`})
    },
  },
};
</script>
  <style lang='less' scoped>
</style>
  